<template>
	<Loading :isLoading="adminStore.getLoading">
		<Card>
			<template #title>
        <span>
          <i class="pi pi-arrow-left" @click="$router.back()" style="font-size: 1rem; padding: 5px; cursor: pointer;"></i>
          菜单授权
        </span>
      </template>
			<template #content>
        <!-- :expandedKeys="adminStore.getNodes.expandedKeys" -->
        <Tree v-model:selectionKeys="selectedKeys"  :expandedKeys="adminStore.getNodes.expandedKeys" v-on:node-select="handleSelect" v-on:node-unselect="handleUnselect"  :value="adminStore.getNodes.nodes" selectionMode="checkbox" class="w-full"></Tree>
        <Button label="提交授权" @click="handleSubmit" class="mt-3"/>
			</template>
		</Card>
	</Loading>
</template>

<script setup lang="ts">
import { onBeforeMount, ref, watch } from 'vue'
import { useRoute } from 'vue-router';
import type { TreeSelectionKeys } from 'primevue/tree';
import { useToast } from 'vue-toastification'
import { useAdminStore } from '@/stores/admin';
import { Card, Tree, Button } from '@/utils/primevue'
import Loading from '@/components/Loading/Loading-component'
import { keys } from 'lodash';

const route = useRoute()
const adminStore = useAdminStore()
const selectedKeys = ref<TreeSelectionKeys>();
const toast = useToast()

// 监听仓库变化
adminStore.$subscribe((mutation, state) => {
 selectedKeys.value = adminStore.getSelectKeys
})

onBeforeMount(() => {
  adminStore.queryAdminMenu(route.params.id as string, () => {})
})

const handleSubmit = () => {
  const ids = keys(selectedKeys.value).toString()
  adminStore.editAdminMenu({
    id: parseInt(route.params.id as string),
    actions: ids
  }, () => {
    toast.success('授权成功')
  })
}
const handleSelect = () => {}

const handleUnselect = () => {}

</script>

<style lang="less" scoped>

</style>
